<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="base/resource"/>
    <title>离线调度 - Big Whale</title>
    <link href="../libs/bootstrap-select/bootstrap-select.min.css" rel="stylesheet"/>
    <link href="../libs/bootstrap-switch/bootstrap-switch.min.css" rel="stylesheet"/>
    <link href="../css/common.css" rel="stylesheet"/>
</head>
<body ng-app="content-app" ng-controller="content-controller">
<div class="modal fade" id="editDlg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">{{editItem.id ? "编辑" : "新增"}}</h4>
            </div>
            <form class="form-horizontal" ng-submit="onSaveItem()">
                <div class="modal-body">
                    <div class="form-group" th:if="${session.user.root}">
                        <label for="modal_select_user" class="col-sm-3 control-label">
                            用户&nbsp;<B>*</B>
                        </label>
                        <div class="col-sm-4">
                            <select id="modal_select_user" class="form-control selectpicker show-tick" data-live-search="true"
                                    ng-model="editItem.uid" ng-options="item.id as item.username for item in userList" required>
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_select_script" class="col-sm-3 control-label">
                            脚本&nbsp;<B>*</B>
                        </label>
                        <div class="col-sm-4">
                            <select id="modal_select_script" class="form-control selectpicker show-tick" data-live-search="true"
                                    ng-model="editItem.scriptId" ng-options="item.id as item.name for item in scriptList | scriptFilter: editItem.uid" required>
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_select_subScript" class="col-sm-3 control-label">
                            子脚本
                        </label>
                        <div class="col-sm-4">
                            <div ng-repeat="tip in editItem.subScriptIds track by $index">
                                <div style="width: 92%; display: inline-block">
                                    <select id="modal_select_subScript" class="form-control selectpicker show-tick" data-live-search="true"
                                            ng-model="editItem.subScriptIds[$index]" ng-options="item.id as item.name for item in scriptList | scriptFilter: editItem.uid: editItem.scriptId">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                                <span class="glyphicon glyphicon-minus" ng-click="onRemoveTip(editItem.subScriptIds, $index)"></span>
                            </div>
                            <div ng-click="!editItem.subScriptIds ? editItem.subScriptIds = []: '';onAddTip(editItem.subScriptIds);">
                                <span style="padding-top: 7px;" class="glyphicon glyphicon-plus"></span>
                            </div>
                        </div>
                        <div class="col-sm-5">
                            <p class="help-block">当主脚本执行完成后，顺序往下执行子脚本</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">
                            调度周期&nbsp;<B>*</B>
                        </label>
                        <div class="col-sm-4">
                            <input id="cycle_input_cron" class="form-control" ng-model="editItem.cron" placeholder="cron表达式" required>
                            <div id="cycle_div_visual">
                                <h4 style="margin: 0 0; padding: 5px 0;">
                                    <label class="label label-info">
                                        每
                                    </label>
                                </h4>
                                <input id="cycle_input_intervals" class="form-control" type="number" min="1" ng-model="editItem.intervals" placeholder="间隔" required>
                                <select id="cycle_select_cycle" class="form-control selectpicker show-tick" title="维度"
                                        ng-model="editItem.cycle" ng-options="item.value as item.name for item in taskCycleList">
                                </select>
                                <div id="cycle_div_week">
                                    <select class="form-control selectpicker show-tick" title="星期"
                                            ng-model="editItem.week" ng-options="item.value as item.name for item in weekList"  multiple required>
                                    </select>
                                </div>
                                <div id="cycle_div_hour">
                                    <select class="form-control selectpicker show-tick" title="时"
                                            ng-model="editItem.hour" ng-options="item.value as item.name for item in hourList">
                                    </select>
                                </div>
                                <div id="cycle_div_minute">
                                    <select class="form-control selectpicker show-tick" title="分"
                                            ng-model="editItem.minute" ng-options="item.value as item.name for item in minuteList" >
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-5" style="padding: 0.5% 15px; line-height: 14px;">
                            <label for="input_visual" class="label label-info">可视化模式</label>&nbsp;<input id="input_visual" type="checkbox" name="visual-checkbox" checked>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inp_start" class="col-sm-3 control-label">
                            开始时间&nbsp;<B>*</B>
                        </label>
                        <div class="col-sm-4">
                            <input id="inp_start" class="laydate-icon" ng-model="editItem.startTime" required/>
                        </div>
                        <br/>
                    </div>
                    <div class="form-group">
                        <label for="inp_end" class="col-sm-3 control-label">
                            结束时间&nbsp;<B>*</B>
                        </label>
                        <div class="col-sm-4">
                            <input id="inp_end" class="laydate-icon" ng-model="editItem.endTime" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_select_repeatSubmit" class="col-sm-3 control-label">
                            可重复提交
                        </label>
                        <div class="col-sm-4">
                            <select id="modal_select_repeatSubmit" class="form-control selectpicker show-tick"
                                    ng-model="editItem.repeatSubmit" ng-options="item.value as item.name for item in booleanTypeList" required>
                            </select>
                        </div>
                        <div class="col-sm-5">
                            <p class="help-block">当已经存在相关yarn任务时，是否允许再次提交该任务</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_select_sendMail" class="col-sm-3 control-label">
                            发送邮件
                        </label>
                        <div class="col-sm-4">
                            <select id="modal_select_sendMail" class="form-control selectpicker show-tick"
                                    ng-model="editItem.sendMail" ng-options="item.value as item.name for item in booleanTypeList" required>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">
                            钉钉通知
                        </label>
                        <div class="col-sm-4">
                            <div ng-repeat="tip in editItem.dingdingHooks track by $index">
                                <input style="width: 95%; display: inline-block" type="text" class="form-control" ng-model="editItem.dingdingHooks[$index]" placeholder="钉钉token" ><span style="width: 5%" class="glyphicon glyphicon-minus" ng-click="onRemoveTip(editItem.dingdingHooks, $index)"></span>
                            </div>
                            <div ng-click="!editItem.dingdingHooks ? editItem.dingdingHooks = []: '';onAddTip(editItem.dingdingHooks);">
                                <span style="padding-top: 7px;" class="glyphicon glyphicon-plus"></span>
                            </div>
                        </div>
                        <div class="col-sm-5">
                            <p class="help-block">需要指定@用户，可用“&”拼接，如：token&@phone1@phone2</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_select_status" class="col-sm-3 control-label">状态</label>
                        <div class="col-sm-4">
                            <select id="modal_select_status" class="form-control selectpicker show-tick"
                                    ng-model="editItem.status" ng-options="item.value as item.name for item in enableTypeList" required>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" id="btn_submit">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="container-fluid animated fadeInDown">
    <div class="bw-nav">
        <div class="row">
            <ol class="breadcrumb">
                <li class="active">离线调度</li>
            </ol>
            <a class="bw-refresh" onclick="location.reload()" title="刷新">
                <i class="fa fa-refresh" style="font-size: 18px"></i>
            </a>
        </div>
    </div>
    <div class="bw-body">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-12 search-form">
                    <form class="form-inline" ng-submit="options.mypage.toFirst()">
                        <div class="form-group" th:if="${session.user.root}">
                            <label for="query_select_user">用户</label>
                            <select id="query_select_user" class="selectpicker show-tick" data-live-search="true"
                                    ng-model="options.query.uid" ng-options="item.id as item.username for item in userList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="query_select_script">脚本</label>
                            <select id="query_select_script" class="selectpicker show-tick" data-live-search="true"
                                    ng-model="options.query.scriptId" ng-options="item.id as item.name for item in scriptList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">搜索</button>
                            <button type="button" class="btn btn-primary" ng-click="onNewItem()">新增</button>
                        </div>
                    </form>
                </div>
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>
                                        操作
                                    </th>
                                    <th th:if="${session.user.root}">
                                        用户
                                    </th>
                                    <th>
                                        脚本名称
                                    </th>
                                    <th>
                                        脚本类型
                                    </th>
                                    <th>
                                        调度周期
                                    </th>
                                    <th>
                                        状态
                                    </th>
                                    <th class="order" ng-click="sort('lastExecuteTime', asc)">
                                        <div>上一次运行</div>
                                        <div>
                                            <i class="glyphicon glyphicon-triangle-top" ng-class="(title === 'lastExecuteTime' && asc === true) ? 'active' : ''"></i>
                                            <i class="glyphicon glyphicon-triangle-bottom" ng-class="(title === 'lastExecuteTime' && asc === false) ? 'active' : ''"></i>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in options.items | orderBy : title : !asc">
                                    <td>
                                        <p class="operate">
                                            <span ng-click="onEditItem(item)">
                                                <i class="glyphicon glyphicon-pencil" aria-hidden="true" title="编辑"></i>
                                            </span><br/>
                                            <span ng-click="onOpenLog(item)">
                                                <i class="glyphicon glyphicon-time" aria-hidden="true" title="日志"></i>
                                            </span><br/>
                                            <span class="remove" id="{{item.id}}_removeBtn" ng-click="onRemoveItem(item)">
                                                <i class="glyphicon glyphicon-trash" aria-hidden="true" title="删除"></i>
                                            </span>
                                        </p>
                                    </td>
                                    <td th:if="${session.user.root}">
                                        {{userMap[item.uid].username}}
                                    </td>
                                    <td>
                                        {{scriptMap[item.scriptId].name}}
                                    </td>
                                    <td>
                                        {{scriptTypeMap[scriptMap[item.scriptId].type].name}}
                                    </td>
                                    <td>
                                        <span class="badge">from: {{item.startTime}}</span>
                                        <p style="margin-bottom: 0" ng-if="item.cron != null">
                                            <span class="badge">{{item.cron}}</span>
                                        </p>
                                        <!-- 可视化 -->
                                        <p style="margin-bottom: 0" ng-if="item.cron == null">
                                            <span class="badge">
                                                <span ng-if="item.cycle == 1">每{{item.intervals}}分钟</span>
                                                <span ng-if="item.cycle == 2">每小时{{item.minute}}分</span>
                                                <span ng-if="item.cycle == 3">每天{{item.hour}}点{{item.minute}}分</span>
                                                <span ng-if="item.cycle == 4">每周{{item.weekName}}{{item.hour}}点{{item.minute}}分</span>
                                            </span>
                                        </p>
                                        <span class="badge">to: {{item.endTime}}</span>
                                    </td>
                                    <td>
                                        <label ng-if="enableTypeMap[item.status]" class="label label-{{enableTypeMap[item.status].style}}">
                                            {{enableTypeMap[item.status].name}}
                                        </label>
                                    </td>
                                    <td>
                                        {{item.lastExecuteTime}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <mypage ng-model="options"></mypage>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<script src="../libs/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../libs/bootstrap-select/i18n/defaults-zh_CN.js" type="text/javascript"></script>
<script src="../libs/bootstrap-switch/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="../libs/angular-1.3.9/angular.min.js" type="text/javascript"></script>
<script src="../libs/angular-1.3.9/myangular.js" type="text/javascript"></script>
<script src="../js/common.js" type="text/javascript"></script>
<script src="../libs/laydate/laydate.js" type="application/javascript"></script>
<script th:inline="javascript">
    var user = [[${session.user}]];
    var app = angular.module('content-app', []);
    registerPage(app);
    registerMultiBigSelector(app);
    registerDateRange(app, 'inp_start', 'inp_end');
    registerAuth(app);

    var $visualCheckbox = $('[name="visual-checkbox"]');
    var $cycleInputCron = $('#cycle_input_cron');
    var $cycleDivVisual = $('#cycle_div_visual');
    var $cycleInputIntervals = $('#cycle_input_intervals');
    var $cycleSelectCycle = $('#cycle_select_cycle');
    var $cycleDivWeek = $('#cycle_div_week');
    var $cycleDivHour = $('#cycle_div_hour');
    var $cycleDivMinute = $('#cycle_div_minute');
    var $btnSubmit = $('#btn_submit');

    app.controller('content-controller', function ($scope, $http, $timeout) {
        if (user.root) {
            getAuthUser($scope, $http);
        }
        getScript($scope, $http, false, true);
        appendEnableType($scope);
        appendTaskCycle($scope);
        appendHour($scope);
        appendMinute($scope);
        appendWeek($scope);
        appendBooleanType($scope);
        appendScriptType($scope);
        registerSort($scope);

        //新增
        $scope.onNewItem = function () {
            var now = new Date();
            var tenYearsLater = new Date(now.getTime() + (60 * 60 * 24 * 365 * 10 * 1000));
            $scope.editItem = {
                sendMail: true,
                status: 1,
                type: 2,
                cycle: 1,
                week: ['6'],
                hour: 0,
                minute: 0,
                intervals: 2,
                subScriptIds: [],
                repeatSubmit: false,
                startTime: now.format('yyyy-MM-dd HH:mm:ss'),
                endTime: tenYearsLater.format('yyyy-MM-dd HH:mm:ss'),
                cron: '0 */2 * * * ?'
            };
            $visualCheckbox.bootstrapSwitch('state', true);
            $('#editDlg').modal({backdrop: 'static', keyboard: false});
        };

        //编辑
        $scope.onEditItem = function (item) {
            $scope.editItem = angular.copy(item);
            if ($scope.editItem.week === null) {
                $scope.editItem.week = ['6'];
            }
            if ($scope.editItem.intervals === null) {
                $scope.editItem.intervals = 2;
            }
            if ($scope.editItem.cron) {
                $visualCheckbox.bootstrapSwitch('state', false);
            } else {
                $visualCheckbox.bootstrapSwitch('state', true);
                $scope.editItem.cron = '0 */2 * * * ?';
            }
            $('#editDlg').modal({backdrop: 'static', keyboard: false});
        };
        $('#editDlg').on('shown.bs.modal', function () {
            $scope.selectCycleChange($cycleSelectCycle.val());
            $('.selectpicker').selectpicker('refresh');
        });

        $scope.onAddTip = function (tips) {
            if (!tips) {
                tips = [''];
            }
            tips.push('');
            $timeout(function () {
                $('.selectpicker').selectpicker('refresh');
            }, 50);
        };

        $scope.onRemoveTip = function (tips, index) {
            if (!tips) {
                return;
            }
            tips.splice(index, 1);
        };

        //保存
        $scope.onSaveItem = function () {
            var startTime = $('#inp_start').val();
            var endTime = $('#inp_end').val();
            $scope.editItem.startTime = startTime;
            $scope.editItem.endTime = endTime;
            $btnSubmit.attr('disabled', 'true');
            if ($visualCheckbox.bootstrapSwitch('state')) {
                $scope.editItem.cron = null;
            }
            $http.post('./save.api', $scope.editItem)
                .success(function (data) {
                    $('#editDlg').modal('hide');
                    if (data.code === 0) {
                        swal('操作成功', data.msg, 'success');
                        $scope.reload();
                    } else {
                        swal('操作失败', data.msg, 'error');
                    }
                    $btnSubmit.removeAttr('disabled');
                });
        };

        //执行日志
        $scope.onOpenLog = function (item) {
            if (parent.xadmin) {
                parent.xadmin.open('离线调度 - 执行日志', 'script/cmd_record/list.html?schedulingId=' + item.id);
            } else {
                window.open('../script/cmd_record/list.html?schedulingId=' + item.id);
            }
        };

        $scope.onRemoveItem = function (item) {
            removeItem('./delete.api', item, $http, $scope.reload);
        };

        // 获取数据列表
        $scope.options = {
            query: {},
            listUrl: './getpage.api',
            reloadAfter : function (items) {
                items.forEach(function (item) {
                    var weekName = [];
                    if (item.week != null && item.week.length > 0) {
                        item.week.forEach(function (value) {
                            weekName.push($scope.weekMap[value].name);
                        })
                    }
                    item.weekName = weekName;
                })
            }
        };

        // 刷新
        $scope.reload = function () {
            $scope.options.mypage.reload();
        };

        $timeout(function () {
            $('.selectpicker').selectpicker('refresh');
        }, 3000);

        //初始化切换开关
        $visualCheckbox.bootstrapSwitch({
            onColor: 'success',
            offColor: 'default',
            size: 'mini',
            onSwitchChange: function(event, state){
                if (state === true){
                    $cycleInputCron.hide();
                    $cycleDivVisual.show();
                } else {
                    $cycleInputCron.show();
                    $cycleDivVisual.hide();
                }
                $('.selectpicker').selectpicker('refresh');
            }
        });

        //处理可视化调度周期
        $cycleSelectCycle.change(function () {
            $scope.selectCycleChange(this.value);
        });
        $scope.selectCycleChange = function (val) {
            if (val === '0') {
                $cycleInputIntervals.show();
                $cycleDivWeek.hide();
                $cycleDivHour.hide();
                $cycleDivMinute.hide();
            } else if (val === '1') {
                $cycleInputIntervals.hide();
                $cycleDivWeek.hide();
                $cycleDivHour.hide();
                $cycleDivMinute.show();
            } else if (val === '2') {
                $cycleInputIntervals.hide();
                $cycleDivWeek.hide();
                $cycleDivHour.show();
                $cycleDivMinute.show();
            } else {
                $cycleInputIntervals.hide();
                $cycleDivWeek.show();
                $cycleDivHour.show();
                $cycleDivMinute.show();
            }
        };
        //初始化状态
        $cycleInputCron.hide();
        $cycleDivWeek.hide();
        $cycleDivHour.hide();
        $cycleDivMinute.hide();

    });

    app.filter('scriptFilter', function () {
        return function (scripts, uid, scriptId) {
            scripts = scripts.filter(function (script) {
                if (uid) {
                    if (script.uid !== uid) {
                        return false;
                    }
                }
                if (scriptId) {
                    if (script['id'] === scriptId) {
                        return false;
                    }
                }
                return true;
            });
            setTimeout(function () {
                $('.selectpicker').selectpicker('refresh');
            }, 100);
            return scripts;
        }
    });

</script>
</body>
</html>